<!--首页，默认重定向应该在这里-->
<template>
<!--首页的元素有两个-->

  <!--1.首页的第一部分是一个轮播图-->
  <div style="background-color: white;width: 100%;height: 350px">
  <el-carousel style="width: 975px;margin: 0 auto;">
    <!--用一个数组装轮播图图片的url，这样方便更换-->
<!--    <el-carousel-item v-for="item in imgUrlArr"><img :src="item.url" style="width:100%;height:100%;"></el-carousel-item>-->
    <el-carousel-item><img src="智启航图标.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="智启航图标.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="智启航图标.jpg" style="width:100%;height:100%;"></el-carousel-item>
  </el-carousel>
  </div>
  <!--2.下面是用el-card制成的各种课程，其中有图片以及课程的标题-->
  <!--每一行用el-row实现，每个卡片用el-col来分区-->

  <el-icon size="18px"><Watermelon /></el-icon><h3>直播课</h3>
  <el-row :gutter="20">

    <el-col :span="4">
      <!--中间是一个盒子模型，上方装图片，下方装一个标题，之后再下方左边是价格，右边是购买量-->
      <el-card>
        <!--课程的卡片模版-->
      <div>
        <img src="智启航图标.jpg"  style="top: 0;width:100%;height:125px;padding: 0">
        <p style=" text-align: center">python高分训练课程</p>
        <div>
          <span style="float: left">100$</span>
          <span style="float: right">10000次购买</span>
        </div>
      </div>
      </el-card>
    </el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
  </el-row>

  <!--这个部分可以使用v-for来做，利用传的图片url数组来存放课程，更换起来也更容易，测试就使用硬链接-->
  <h3>免费课</h3>
  <el-row :gutter="20">
    <el-col :span="4">
      <!--中间是一个盒子模型，上方装图片，下方装一个标题，之后再下方左边是价格，右边是购买量-->
      <el-card>
        <!--课程的卡片模版-->
        <div>
          <img src="智启航图标.jpg"  style="top: 0;width:100%;height:125px;padding: 0">
          <p style=" text-align: center">python高分训练课程</p>
          <div>
            <span style="float: left">100$</span>
            <span style="float: right">10000次购买</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
  </el-row>
  <h3>会员课</h3>
  <el-row :gutter="20">
    <el-col :span="4">
      <!--中间是一个盒子模型，上方装图片，下方装一个标题，之后再下方左边是价格，右边是购买量-->
      <el-card>
        <!--课程的卡片模版-->
        <div>
          <img src="智启航图标.jpg"  style="top: 0;width:100%;height:125px;padding: 0">
          <p style=" text-align: center">python高分训练课程</p>
          <div>
            <span style="float: left">100$</span>
            <span style="float: right">10000次购买</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
  </el-row>
  <h3>精品课</h3>
  <el-row :gutter="20">
    <el-col :span="4">
      <!--中间是一个盒子模型，上方装图片，下方装一个标题，之后再下方左边是价格，右边是购买量-->
      <el-card>
        <!--课程的卡片模版-->
        <div>
          <img src="智启航图标.jpg"  style="top: 0;width:100%;height:125px;padding: 0">
          <p style=" text-align: center">python高分训练课程</p>
          <div>
            <span style="float: left">100$</span>
            <span style="float: right">10000次购买</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
    <el-col :span="4"></el-col>
  </el-row>

  <el-row>
    <!--这一行作为广告条-->
  </el-row>

  <el-row>
    <!--一些说明信息：介绍平台的优点-->
  </el-row>



</template>
<script setup>

import {ref} from "vue";

//装图片url的数组
const imgUrlArr=ref([]);

</script>

<style scoped>

</style>